//下拉菜单
var oli = document.querySelectorAll('.tag>li');
var oitem = document.querySelectorAll('.list>ul');

for (let i = 0; i < oli.length; i++) {
  oli[i].onmouseover = function () {
    oitem[i].style.cssText =
      'top: 0px;opacity: 1;transform: scaleY(1);transition: all 0.5s;z-index:10000;';
  };
  oli[i].onmouseout = function () {
    oitem[i].style.cssText =
      'top: -44px;opacity: 0;transform:scaleY(0.166);transition: all 0.5s;z-index:-1;';
  };
  oitem[i].onmouseover = function () {
    oitem[i].style.cssText =
      'top: 0px;opacity: 1;transform: scaleY(1);transition: all 0.5s;z-index:10000;';
  };
  oitem[i].onmouseout = function () {
    oitem[i].style.cssText =
      'top: -44px;opacity: 0;transform:scaleY(0.166);transition: all 0.5s;z-index:-1;';
  };
}

//搜索、登录界面
var osearch = document.querySelectorAll('.search-pop');
var ologin = document.querySelector('.login-pop');
var osearchBar = document.getElementsByClassName('search-index')[0];
var ologinBar = document.getElementsByClassName('login-index')[0];
var ologinWrap = document.querySelector('.login-wrap');
var oclose1 = document.querySelector('.search-index-head .close');
var oclose2 = document.querySelector('.login-index-head .close');

for (var i = 0; i < osearch.length; i++) {
  osearch[i].index = i
  osearch[i].onclick = function () {
    osearchBar.style.cssText = '  z-index: 10009;opacity: 1;';
    document.body.style.overflow = 'hidden';
  };
}
oclose1.onclick = function () {
  osearchBar.style.cssText = '  z-index: -1;opacity: 0;';
  document.body.style.overflow = '';
};

ologin.onclick = function () {
  ologinBar.style.cssText = '  z-index: 10009;opacity: 1;';
  document.body.style.overflow = 'hidden';
}
oclose2.onclick = function () {
  ologinBar.style.cssText = '  z-index: -1;opacity: 0;';
  document.body.style.overflow = '';
}




//侧边栏点击显示侧栏

var icon = document.getElementsByClassName('icon')[0];
var div_list = document.getElementsByClassName('sub-list')[0];
var flag = true;
icon.onclick = function () {
  if (flag) {
    this.style.transform = 'rotate(-180deg)';
    div_list.style.maxHeight = '162px';
    flag = false;
  } else {
    this.style.transform = 'rotate(0deg)';
    div_list.style.maxHeight = '0px';
    flag = true;
  }
};




//轮播图
var imgs = document.querySelectorAll('.slideshow-box figure');//获取图片
var left = document.querySelector('.slideshow-box .left');//获取左键
var right = document.querySelector('.slideshow-box .right');//获取右键
var circle = document.querySelectorAll('.banner-left li span:nth-child(2)');//获取span添加样式
var oli = document.querySelectorAll('.banner-left li')
console.log(oli);
var index = 0;//设置初始值

//1.自动播放
var timer = setInterval(function () {
  changeimg();
  index++;
}, 5000);
//图片切换功能
function changeimg() {
  if (index < 0) {
    index = imgs.length - 1;
  }
  if (index > imgs.length - 1) {
    index = 0;
  }
  //所有图片都不应用样式
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.display = 'none';
    circle[i].className = 'pending-bg'
  }
  imgs[this.index].onmouseover = function () {
    clearInterval(timer);
  }
  //设置鼠标移入移出
  imgs[index].onmouseout = function () {
    clearInterval(timer);
    timer = setInterval(function () {
      changeimg();
      index++;
    }, 5000);
  }
  //设置当前图片样式
  imgs[index].style.display = 'block';
  circle[index].className = 'pending-bg start'
  for (var i = 0; i < index; i++) {
    circle[i].className = 'pending-bg loaded'
  }
}

//2.按钮切换图片
left.onclick = function () {
  index--;
  changeimg();
}
right.onclick = function () {
  index++;
  changeimg();
}
//3.导航条切换
for (var i = 0; i < oli.length; i++) {
  oli[i].index = i;//将当前的i保存到li的index2属性中
  oli[i].onclick = function () {
    index = this.index;//当前的index
    changeimg();
  }
}


// 最新资讯新闻列表

var otitle = document.querySelectorAll('.newsflash-item-title');
console.log(otitle);
var oslide = document.querySelectorAll('.newsflash-item-detail');
console.log(oslide);

for (var i = 0; i < otitle.length; i++) {
  otitle[i].index = i;
  otitle[i].onclick = function () {
    if (otitle[this.index].className == 'newsflash-item-title') {
      otitle[this.index].className = 'newsflash-item-title active';
      oslide[this.index].className = 'newsflash-item-detail  slide-down';
    }
    else {
      otitle[this.index].className = 'newsflash-item-title';
      oslide[this.index].className = 'newsflash-item-detail';
    }
  }
}



//批量设置热点背景图
var othericon = document.querySelectorAll('.othericon')
for (var i = 0; i < othericon.length; i++) {
  othericon[i].style.backgroundPosition = '0 ' + -(i * 20 + 228) + 'px'
}

//标签切换

var tabs = document.querySelectorAll('.tabs>div');
var tabsContent = document.querySelectorAll('.tabs-content>div');

for (var i = 0; i < tabs.length; i++) {
  tabs[i].index = i;
  tabs[i].setAttribute('data-index', i);
  tabs[i].onclick = function () {
    for (var i = 0; i < tabs.length; i++) {
      tabsContent[i].style.display = 'none';
      tabs[i].className = '';
    }
    tabs[this.index].className = 'bg';
    tabsContent[this.index].style.display = 'block';
  }
}

//返回顶部

window.addEventListener('scroll', () => {
  // 判断距离是否距离页面顶部100vh
  let state = document.documentElement.offsetHeight - 4500 < document.documentElement.scrollTop + document.documentElement.clientHeight;
  console.log(state);
  // 按钮元素
  const span = document.querySelector('.top');
  console.log(span);
  // 根据滚动位置添加或移除类
  span.classList[state ? 'add' : 'remove']('show')
})
// 回到顶部按钮事件
document.querySelector('.top').addEventListener('click', function () {
  // 平滑回滚到页面顶部
  document.documentElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
})


//登录页面验证

//手机号验证
var reg = /^1[3456789]\d{9}/;
var oli = document.querySelectorAll('.login-index-section li')
var otel = document.querySelector('[type="tel"]');
var error = document.querySelectorAll('.error');
otel.onblur = function () {
  if (otel.value == '') {
    error[0].innerHTML = '请输入手机号';
    oli[0].style.borderBottomColor = 'red'
  }
  else if (!reg.test(otel.value)) {
    error[0].style.display = 'block';
    error[0].innerHTML = '请输入正确的手机号'
    oli[0].style.borderBottomColor = 'red'
  }
  else {
    error[0].style.display = 'none';
    oli[0].style.borderBottomColor = '';
  }
}

console.log(error[1]);
//验证码验证

var oyzm = document.querySelector('[placeholder="请输入验证码"]');
var getRandom = document.querySelector('.getRandom');
var loginIn = document.querySelector('.login-in');
oyzm.onblur = function () {
  if (oyzm.value == '') {
    error[1].style.display = 'block';
    error[1].innerHTML = '请输入验证码';
    oli[1].style.borderBottomColor = 'red'
    getRandom.style.cssText = '';
    getRandom.className = 'getRandom spanclick';
    loginIn.style.cssText = ''
  }
  else {
    error[1].style.display = 'none';
    oli[1].style.borderBottomColor = '';
    getRandom.className = 'getRandom spanunclick';
    if (getRandom.innerHTML == '获取验证码') {
      getRandom.style.cssText = 'color: #4285f4;cursor: pointer;';
      loginIn.style.cssText = 'background: #4285f4;opacity: 1;cursor: pointer;'
    }
  }

}

//验证码计时器
var countDown = 30;
getRandom.onclick = function () {
  getRandom.className = 'getRandom spanclick';
  timer = setInterval(function () {
    timer1();
  }, 1000)
}
var timer1 = function () {
  countDown--;
  getRandom.innerHTML = `${countDown}s  后重发`;
  getRandom.style.cssText = '';
  if (countDown == 0) {
    countDown = 30;
    getRandom.className = 'getRandom spanunclick';
    getRandom.innerHTML = `获取验证码`
    getRandom.style.cssText = 'color: #4285f4;cursor: pointer;';
    clearInterval(timer);
  }

}
